<template>
  <ul class="list-group">
    <li
      class="list-group-item d-flex justify-content-between align-items-center"
      v-for=" item of todoList" :key="item.id"
    >
      <input
        class="form-check-input"
        type="checkbox"
        value=""
        v-model="item.isCompleted"
        :id="item.id"
      />

      <span  :class="item.isCompleted? 'delete':''">{{item.todoName}}</span>
      <span class="badge bg-primary rounded-pill " v-if="item.isCompleted">已完成</span>
      <span class="badge bg-warning rounded-pill" v-else>未完成</span>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:{
    todoList:{
        type:Array,
        default:[]
    }
  }
};
</script>
<style scoped>
.list-group {
  width: 500px;
  margin: 0 auto;
}
.delete{
    text-decoration:line-through ;
}
</style>